<template>
    <div class="box">
        <div class="title" >视频提取中心管理</div>
        <div class="top">
            <div class="car">管理车辆 : </div>
            <div class="select">
                <el-select v-model="clientId" filterable placeholder="请选择或输入设备号" @change="changeClientId" >
                    <el-option
                        v-for="item in list"
                        :key="item"
                        :label="item"
                        :value="item"
                    />
                 </el-select>
            </div>
            <div class="Refreshes">
                <img src="../../assets/img/Refresh.png" 
                class="Refresh" 
                :class="{ Refresh: true, spin: isSpinning }"
                @click="getCarlist" />
            </div>
        </div>
        <div class="date">
            <div class="dateText">创建日期 : </div>
            <div>
                <el-date-picker
                    v-model="PDate"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD" 
                    value-format="YYYY-MM-DD"
                    style="width: 14vw;"
                    @change="getDate"
                />
            </div>
        </div>
        <div class="date">
            <div class="dateText">创建时间 : </div>
            <div>
                <el-time-picker
                    v-model="time"
                    is-range
                    style="width: 14vw;"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="getTime"
                    />    
            </div>
        </div>
        <div >
            <div style="margin-top: 8vh;margin-left: 10px;">
                <el-button  class="loads" @click="playTime" style="background-color: #01B2C5;color:#fff;">查询</el-button>
            </div>
        </div>
    </div>
</template>

<script >
import api from "@/api/api";
export default {
    name: 'Conditions',
    props: {

    },
    data: function () {
        return {
            clientId: "",
            list: [],
            //日期
            PDate:[],
            time:[],
            isSpinning: false,
            total: 0,
            online: 0
        }
    },
    emits: ["clientIdAndPlayDate"],
    mounted() {
        this.getCarlist();
        this.getNowDate();
    },
    methods: {
        getCarlist() {
            this.isSpinning = true;
            setTimeout(() => {
                this.isSpinning = false;
            }, 500);
            api.getCarsList().then(res => {
               
                this.list=res.data.authByJtKeyId;
            }).catch(err => {
                console.log(err)
            })
        },
        changeClientId(val) {
            this.clientId = val;
        },
        handleMouseMove(event) {
            event.stopPropagation();
        },
        //播放日期改变
        getDate(val) {
           this.PDate=val;
           
        },
          //播放日期改变
        getTime(val) {
           this.time=val;
        },
        //获取当前日期yy-mm-dd
        getNowDate() {
            const timeOne = new Date()
            const year = timeOne.getFullYear()
            let month = timeOne.getMonth() + 1
            let day = timeOne.getDate()
            month = month < 10 ? '0' + month : month
            day = day < 10 ? '0' + day : day
            this.PDate = [`${year}-${month}-${day}`,`${year}-${month}-${day}`];
        },
        formatDownTime(value) {
            const hours = value.getHours().toString().padStart(2, '0');
            const minutes = value.getMinutes().toString().padStart(2, '0');
            const seconds = value.getSeconds().toString().padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        },
        playTime(){
                var sTime;
                var eTime;
                if (this.time.length<=0) {
                     sTime="00:00:00";
                     eTime="23:59:59";
                }else{
                     sTime=this.formatDownTime(this.time[0]);
                     eTime=this.formatDownTime(this.time[0]);
                }
                var startTime=this.PDate[0]+" "+sTime;
                var endTime =this.PDate[1]+" "+eTime;
                this.$emit("clientIdAndPlayDate",[this.clientId,startTime,endTime]);
        }
    },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.title{
   color:#fff;
   background-color: #556449;
   height: 5vh;
   line-height: 5vh;
   border-radius: 100px;
   margin-top: 2vh;
  
}
/* 调整父容器样式 */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.top{
    margin-top: 5vh;
    margin-left: 1vw;
    height: 2vh;
    text-align: center;
}
.car{
    float: left;
    color: #fff;
    line-height: 3vh;
}

.select{
    float: left;
    line-height: 2vh;
    margin-left: 1vw;
}
.Refreshes{
 
    margin-left: 10px;
  
    float: left;
    line-height: 2vh;

}
.Refresh{
    width: 30px;
    height: 30px;
}
.date{
    margin-top: 5vh;
    margin-left: 1vw;
    height: 2vh;
    text-align: center;
}
.dateText{
    float: left;
    color: #fff;
    line-height: 3vh;
}
</style>
